<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        ul{list-style-type: none; padding: 0px; margin: 0px;}
        li{width:100px;}
        ul.lanmu>li{background-color: blue;color: white;}
        ul.caidan>li{background-color: white; color: black;display: none;}
    </style>
</head>
<body>
    <ul class="lanmu">
        <li class="class1">栏目1
            <ul class="caidan"> 
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
            </ul>
        </li>
        <li class="lanmu">栏目2
            <ul class="caidan">
                    <li>菜单1</li>
                    <li>菜单2</li>
                    <li>菜单3</li>
            </ul>
     </li> 
    </ul>
    <div class="container">
        <div class="source">
            <select name="" id="leftselect" multiple="multiple">
                <option value="0">文件</option>
                <option value="1">编辑</option>
                <option value="2">选择</option>
                <option value="3">查看</option>
                <option value="4">转到</option>
            </select>
            <buttom class="movetorightone">&gt;</buttom>
            <buttom class="movetorightall">&gt;&gt;</buttom>
            <buttom class="movetoleftone">&lt;</buttom>
            <buttom class="movetoleftall">&lt;&lt;</buttom>
            <select name="" id="rightselect" multiple="multiple"></select>
        </div>
    </div>
    <script>
        $('.movetorightone').on('click',function(){
            $('#leftselect option:selected').appendTo('#rightselect');
        });
        $('.movetorightall').on('click',function(){
            $('#leftselect option:selected').appendTo('#rightselect');
        });
        $('.movetoleftone').on('click',function(){
            $('#rightselect option:selected').appendTo('#leftselect');
        });
        $('.movetoleftall').on('click',function(){
            $('#rightselect option:selected').appendTo('#leftselect');
        });
    $('ul.lanmu>li').click(function(){
        $(this).siblings().children().children().css('display','none');
        $(this).children().children().css('display','block');
    });
    </script>
   
</body>
</html>